<!doctype html>
<html lang="fr">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>Socagora</title>
    <link rel="stylesheet" href="css/style.css" />

    <!-- Lib & frameworks -->
    <script type="text/javascript" src="js/vendor/json2.js"></script>
    <script type="text/javascript" src="js/vendor/jquery.js"></script>
    <script type="text/javascript" src="js/vendor/underscore.js"></script>
    <script type="text/javascript" src="js/vendor/backbone.js"></script>
    <script type="text/javascript" src="js/vendor/backbone-localstorage.js"></script>
    <script type="text/javascript" src="js/vendor/speakClient.js"></script>

  </head>
   
  <body>
    <div id="container">
      <!-- Facebook Javascript SDK initialisation -->
      <div id="fb-root"></div>

      <!-- audio for speak.js -->
      <div id="audio"></div>

      <!-- friend links -->
      <div id="line-container"></div>

      <!-- banner -->
      <header id="header" role="banner">
        <a href="../socagora/index.html">
          <img src="img/logo.gif" alt="Socagora"/>
        </a>
      </header>

      <!-- main block that take all the window, switch gradient1->2 to change background color -->
      <div id="main" class="gradient1">

        <!-- Fb connect button -->
        <div id="connect-form" class="visible">
          <button id="fb-connect-button" onclick="fbLogin()">
            <div class="image"></div>
          </button>
        </div>
        <!-- preview button -->
        <div id="demo-form" class="visible">
          <button id="demo-button" onclick="startDemo()">
            <div class="image" title="Not representative. At all."></div>
          </button>
        </div>
        <!-- Facebook post collecion display -->
        <div id="fbposts"></div>

      </div>

      <footer id="footer">
        <!-- contains the information button -->
        <div class="left">
          <a rel="info-popup" class="popup-trigger">
            <img src="img/info-icon.gif" alt="Information" title="About"/>
          </a>
        </div>
        <!-- contains the settings button -->
        <div class="right">
          <a rel="settings-popup" class="settings-trigger">
            <img src="img/tool-icon.gif" alt="Settings" title="Settings"/>
          </a>
        </div>
        <!-- to publish on Facebook -->
        <div id="add-panel" class="hidden">
          <a rel="add-popup" class="add-trigger">
            <img src="img/add-icon.gif" alt="Add" title="Publish"/>
          </a>
          <input id="add-input" placeholder=" Post on Facebook !"></input>
        </div>
        <!-- setting tools -->
        <div id="settings-panel" style="visibility:hidden; right:-60px; opacity:0">
          <!-- friends links, doesn't work -->
          <!--div id="links-settings">
            <img src="img/link-on.gif" alt="Links" title="Show friend links" />
          </div-->
          <!-- how much posts you display -->
          <div id="nbposts-settings">
            <input id="nbposts-slider" type="range" min="0" max="20" />
            <img src="img/nbposts.gif" alt="Nb posts" "Number of posts" />
          </div>
          <!-- time interval between each Facebook fetching -->
          <div id="refresh-settings">
            <input id="refresh-slider" type="range" min="10" max="120" step="10" />
            <!-- click on the icon to trigger the fetching immediatly -->
            <a class="refresh-trigger">
              <img src="img/refresh.gif" alt="Refresh" title="Refresh time" />
            </a>
          </div>
          <!-- to enable vocal messages -->
          <div id="sound-settings">
            <img src="img/sound-off.gif" alt="Sound" title="Speaking" />
          </div>
        </div>

      </footer>
    </div>

    <!-- Information popup -->
    <div id="info-popup" class="popup-block">
      <p>Socagora est une autre façon de consulter les messages provenant de ses réseaux sociaux.</p><br/>
      <p>Cette application a été réalisée par <a href="http://fb.com/duriez.remi" target="_blank">Rémi Duriez</a>, dans le cadre du module GLIHM du <a href="http://fil.univ-lille1.fr/master-informatique/E-Services/" target="_blank">Master Informatique de l'Université Lille 1</a>.</p><br/>
      <!-- number of friends who have connected to the site -->
      <iframe src="http://www.facebook.com/plugins/facepile.php?app_id=175238489288096" scrolling="no" frameborder="0" style="border:none;overflow:hidden;width:300px;" allowTransparency="true" id="facepile"></iframe>
    </div>

    <!-- Template for Facebook post (name, message, picture) -->
    <script type="text/template" id="fbpost-template">
      <div id="fb-name"
        class="hidden"
        style="left:<%= pos_x - from_name.length*0.05 %>%;
                top:<%= pos_y %>%">
        <div class="bubble-content">
          <%= from_name %><br/>
        </div>
      </div>
      <div id="profile-pic" class="img-size0" style="position:absolute; left:<%= pos_x %>%; top:<%= pos_y %>%">
        <img src="<%= from_picture %>" alt="<%= from_name %>" />
      </div>
      <div id="fb-bubble"
        class="hidden"
        style="left:<%= pos_x %>%;
                top:<%= parseInt(pos_y,10) %>%">
        <div class="bubble-content">
          <span id="fb-msg">
            <%= message %>
          </span>
          <span id="likes-comments">
            <img src="img/likes-icon.gif" alt="Likes"/><%= likes %>
            <img src="img/comments-icon.gif" alt="Comments"/><%= comments %>
          </span>
        </div>
      </div>
    </script>

  </body>

  <!-- Facebook tools and init -->
  <script type="text/javascript" src="js/facebook/facebookInit.js"></script>
  <!-- Facebook fetching methods -->
  <script type="text/javascript" src="js/facebook/facebookCheck.js"></script>
  <!-- Backbone models -->
  <script type="text/javascript" src="js/models/fbposts.js"></script>
  <!-- Backbone views -->
  <script type="text/javascript" src="js/views/fbpostview.js"></script>
  <script type="text/javascript" src="js/views/fbpostscollectionview.js"></script>
  <!-- Backbone router -->
  <!--script type="text/javascript" src="js/routers/fbpostsrouter.js"></script-->
  <!-- Events -->
  <script type="text/javascript" src="js/events.js"></script>
  <!-- Tools -->
  <script type="text/javascript" src="js/tools.js"></script>
   
</html>